<template>
  <div class="login-layout-bg">
    <!-- vue2 ,在template里面，必须有一个根元素 -->
    <transition name="slide-fade">
      <div class="login-form-layout" v-if="isShow">
        <h3>{{ title }}</h3>
        <div>
          <input type="text" v-model="phone" />
        </div>
        <div>
          <input type="password" v-model="password" />
        </div>
        <div>
          <el-button type="success" @click="loginHandler">LOGIN</el-button>
        </div>
        <div>
          <el-button type="warning" @click="findMima">找回密码 </el-button>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div class="login-form-layout" v-if="!isShow">
        <h1>找回密码</h1>
        <div>
          <input type="text" v-model="username" />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { login } from '@/config/api'
import { mapActions, mapMutations } from 'vuex'
// 每一组件，必须默认公开一个vue实例化对象
export default {
  name: 'LoginView',
  data() {
    return {
      title: '四川省智能水务管理系统',
      phone: '1',
      password: '1',
      isShow: true
    }
  },
  created() {
    console.log(this.$store)
  },
  props: {
    loginState: Boolean // 直接定义props的属性名, 使用和data选项里面的属性一样使用。
  },

  methods: {
    // ...mapMutations(['userInfoMt', 'tokenMt']),
    // ...mapMutations({
    //   userInfoHandler: 'userInfoMt', // 映射 `this.$store.commit('userInfoMt')
    //   tokenHandler: 'tokenMt' // 映射 `this.$store.commit('tokenMt')
    // }),

    ...mapActions(['userInfoAc', 'tokenAc', 'getMenes']), // this.$store.dispatch('userInfoAc')
    ...mapActions({
      userInfoHandler: 'userInfoAc',
      tokenHandler: 'tokenAc' // this.$store.dispatch('tokenAc')
    }),
    findMima() {
      this.isShow = false
    },
    loginHandler() {
      login({ password: this.password, phone: this.phone })
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            // element-ui的弹框
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            // 存储token:
            sessionStorage.token = res.data.Authorization
            sessionStorage.userInfo = JSON.stringify(res.data.admin)

            // vuex 存储用户数据、token到仓库，
            // this.$store.dispatch('userInfoAc', res.data.admin)
            // this.$store.dispatch('tokenAc', res.data.Authorization)

            // 映射mapMutations:
            // this.userInfoMt(res.data.admin)
            // this.tokenMt(res.data.Authorization)

            // this.userInfoHandler(res.data.admin)
            // this.tokenHandler(res.data.Authorization)

            // 映射actions后，调用方式：
            // this.userInfoAc(res.data.admin)
            // this.tokenAc(res.data.Authorization)

            this.userInfoHandler(res.data.admin)
            this.tokenHandler(res.data.Authorization)

            this.getMenes() // 获取menus数据。
            this.$router.push('/home')
          } else {
            this.$message({
              type: 'error',
              message: '登录失败'
            })
          }
        })
        .catch(err => {
          // console.log(err)
          this.$message({
            type: 'error',
            message: '服务器异常'
          })
        })
    }
  }
}
</script>
<!-- lang="less": 使用less做css的预编译语言。 scoped ： 局部的样式表。-->
<style lang="less" scoped>
.login-layout-bg {
  width: 100%;
  height: 100%;
  background-image: url('./../../assets/login-bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-form-layout {
  width: 400px;
  height: 300px;
  background-color: #ffffff8e;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;

  //&，表示当前选择器 , 可以省略
  // >, 编译位子元素选择器
  & > h3 {
    margin: 20px 0;
    font-size: 1.5rem;
  }

  //  “ ” 空格表示后代
  & input {
    width: 80%;
    height: 40px;
    margin: 20px;
    outline: 0;
    border: 1px solid gray;
    border-radius: 3px;
    text-indent: 10px;
  }

  button {
    width: 80%;
    height: 40px;
    // background-color: #11a811;
    // outline: 0;
    // border: 0px solid gray;
    // border-radius: 3px;
    cursor: pointer;
    color: white;
  }
}

.slide-fade-enter-to {
  opacity: 1;
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter {
  opacity: 0;
  transition: all 0.3s ease;
}
</style>
